













<template>

  <div class="main">
    <FootComponen></FootComponen>
    <div class="top">分类</div>

    <div class="content">
      <div class="content_left">
        <div :class="['content_left_item', { con: tab == item.cateId }]" v-for="(item,index) in list" :key="item.cateId" @click="getlist(item.cateId,index)">{{item.name}}</div>
   
      </div>

      <div class="content_right" v-for="item in listitem" :key="item.cateId">
        <div class="content_right_img">
          <img
            :src="item.banner.cover"
        
          />
        </div>
        <div class="box">
          <div class="content_right_item" v-for="ele in item.subcategories" :key="ele.subCateId" @click="setbannerlist(ele.name,ele.subCateId)">
            <div class="img">
              <img
                :src="ele.cover"
              />
            </div>
            <p>{{ele.name}}</p>
          </div>
         
        
      
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { getbranch } from "../api/branch.js";
import FootComponen from '../components/FootComponen.vue'
export default {
      components:{
FootComponen
  },
  data() {
    return {
      tab: 105,
      list:'',
      listitem:[],
    };
  },
  created(){
    getbranch({page:1}).then(data=>{
      // console.log(data.data);
      this.list=data.data
      this.list.splice(4,1)
            this.list.splice(8,1)
      console.log(this.list);
      this.listitem.push(this.list[0])
      console.log(this.listitem);


    })
  },
  methods: {
    getlist(id,index){
      this.tab=id
       this.listitem=[]
      this.listitem.push(this.list[index])
    },
    setbannerlist(name,id){

      this.$emit("getlistid", id);
      this.$emit("getaidname", name);
      this.$router.push({name:'barlist'})
    }
  },

}
</script>

<style lang="scss" scoped>

*{
    padding:0px;
    margin: 0px;
}
.main{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    height: 100%;
}

html,body{
    width: 100%;
    height: 100%;
}
ul,ol{
    list-style: none;
}
h1{
    font-weight: normal;
    font-size: 22px;
}
h2{
    font-weight: normal;
    font-size: 20px;
}
h3{
    font-weight: normal;
    font-size: 18px;
}
h4{
    font-weight: normal;
    font-size: 16px;
}
h5{
    font-weight: normal;
    font-size: 14px;
}
h6{
    font-weight: normal;
    font-size: 12px;
}

a{
    text-decoration: none;
    color:#404040;
}
img{
    display: block;
}
input{
    font-family: 'Microsoft YaHei';
    outline: none;
}

em, i {
    font-style: normal;
}
/*单行溢出*/
.one-txt-cut{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 2; */
    -webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {
    background: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
* {
  padding: 0;
  margin: 0;
}
.top {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.content {
  display: flex;
  .content_left {
    width: 88px;
    height: 550px;
    overflow-y: scroll;
    .content_left_item {
      height: 53px;
      line-height: 53px;
      font-size: 13px;
      color: #636363;
      text-indent: 32px;
      position: relative;
      &.con {
        color: #f2924d;
        font-weight: 600;
      }
      &.con::after {
        content: "";
        display: block;
        width: 2px;
        height: 14px;
        background-color: #ff5a38;
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .content_right {
    flex: 1;
    margin: 0px 15px;
    background-color: #ffffff;
    overflow-y: scroll;
    .content_right_img {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .box {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .content_right_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        .img {
          width: 70px;
          height: 70px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          font-size: 14px;
          padding: 8px 0;
        }
      }
    }
  }
}
</style>
